<template>
  <div class="middle">
      <div>
         <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="item of bannerlist" :key="item.bannerid">
            <!-- <img v-lazy="item.img" /> -->
            <van-image
              lazy-load
              :src="item.img"
            />
          </van-swipe-item>
    </van-swipe>
      </div>
      <ul>
        <li class="moveList" v-for="item of prolist" :key="item.proid">
          <div class="picture">
            <img :src="item.proimg" alt="">
          </div>
          <div class="info">
            <h1>{{ item.proname }}</h1>
            <span>{{ item.desc}}</span><br>
            <!-- <p>{{item.action}}</p> -->
            <!-- <i>{{item.rating}}</i> -->
          </div>
          <div class="onSale">
            <span class="a" v-if="flag">购买</span>
            <span class="b" v-else>预售</span>
          </div>
        </li>
      </ul>
  </div>
</template>

<script>
import Vue from 'vue'
import { Swipe, SwipeItem, Lazyload, Image } from 'vant'
import { getBannerlist } from '@/api'
Vue.use(Swipe) // Vue.use - 注册的组件
Vue.use(SwipeItem) // Vue.use - 注册的组件
Vue.use(Lazyload) // Vue.use - 注册的组件
Vue.use(Image) // Vue.use - 注册的组件
export default {
  props: {
    prolist: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      flag: true,
      bannerlist: []
    }
  },
  mounted () {
    getBannerlist().then(res => {
      this.bannerlist = res.data.data
      console.log(res.data.data)
    })
  }
}
</script>

<style lang="scss">
ul{
  width: 100%;
  overflow: auto;
  .moveList{
    display: block;
    width: 100%;
    height: 150px;
    border-bottom: 1px solid #cccc;
    display: flex;
    padding: 15px;
    .picture{
      width: 80px;
      height: 100%;
      img{
        display: block;
        width: 100%;
        height: 100%;
        border: 1px solid black;
      }
    }
    .info{
        padding: 5px 10px;
        h1{
          margin-bottom: 30px;
        }
      }
     .onSale{
       flex: 1;
       height: 100%;
       margin-left: 20px;
       position: relative;
         .a{
           text-align: center;
           line-height: 25px;
           display: block;
           width: 50px;
           height: 25px;
           border: 1px solid red;
           color: red;
            position: absolute;
            top: 45px;
            right: 0;
         }
         .b{
           text-align: center;
           line-height: 25px;
           display: block;
           width: 50px;
           height: 25px;
           border: 1px solid rgb(0, 153, 255);
           color: rgb(0, 153, 255);
           position: absolute;
           top: 45px;
           right: 0;
         }
    }
  }
}
</style>
